<template>
  <div class="cart">
    <NavBar title="评价"  back/>
    <van-card
        :desc="value.goodsProperty"
        :title="goodsName"
        :thumb="GLOBAL.baseImagePath + imgUrl"
    >
      <div slot="footer">
        <van-rate
          v-model="query.goodsSroce"
          :size="25"
          :count="5"
          :disabled="disabled"
          disabled-color="#ffd21e"
          void-color="#ceefe8"
        />
      </div>
    </van-card>
    <van-cell-group>
      <van-field
        v-model="message"
        type="textarea"
        placeholder="请输入您的评价"
        :rows="rows"
        autosize
      />
    </van-cell-group>
    <div>
      <van-row>

    <ul>
    <li v-for="(item, index) in imgArr" v-bind:key="index">
      <van-col span="8">
        <van-icon name="close" @click="reMovenImg(index)" />
        <img class="img-item" :src="item"/>
      </van-col>
    </li>
    </ul>
      </van-row>
    </div>
    <br>
    <div style="float:right">
    <van-uploader class="uploader" :after-read="onRead" accept="image/*" >
      <van-icon name="photograph" />
    </van-uploader>
    </div>
    <van-submit-bar
      button-text="提交评价"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import NavBar from '../../components/common/NavBar.vue'
import commentApi from '../../api/comment'
// import orderApi from '../../api/order'
import { Toast } from 'vant'
export default {
  data () {
    return {
      query: {
        orderGoodsId: '',
        goodsId: '',
        goodsPropertyId: '',
        status: '',
        content: '',
        urlList: '',
        goodsSroce: 5
      },
      disabled: false,
      urlList: [],
      message: '',
      value: {},
      goodsName: '',
      rows: 5,
      imgUrl: '',
      status: '',
      active: '',
      imgArr: [],
      imgfile: [],
      picFlag: true,
      picUrl: []
    }
  },
  created () {
    var _this = this
    this.value = this.$route.query.goods
    this.imgUrl = this.value.imgUrl
    this.goodsName = this.$route.query.goods.goodsName
    this.status = this.$route.query.status
    this.query.orderGoodsId = this.value.id
    this.query.goodsPropertyId = this.value.goodsPropertyId
    this.query.status = this.value = this.$route.query.status

    // 追加评论状态
    if (this.query.status === 3) {
      commentApi.getGoodsSocre(this.query.orderGoodsId).then(function (res) {
        _this.disabled = true
        if (res.data.status === 0) {
          _this.query.goodsSroce = res.data.re
        } else {
          _this.query.goodsSroce = 5
        }
      })
    }
  },
  computed: {
  },
  methods: {
    handelSwiperSize (value) {
      this.swiperSize = value
    },
    onSubmit () {
      let _this = this
      this.query.urlList = this.picUrl.join(`,`)
      if (this.message.length > 255) {
        Toast.fail('评论长度不能超过255字！')
        return 0
      }
      this.query.content = this.message
      commentApi.addComment(this.query).then(function (res) {
        if (res.data.status === 0) {
          Toast.success('评论成功')
          _this.$router.go(-1)
        } else {
          Toast.fail(res.data.msg)
        }
      })
    },
    reMovenImg (val) {
      this.imgArr.splice(val, 1)
      this.imgfile.splice(val, 1)
      this.picUrl.splice(val, 1)
    },
    onRead (file) {
      var _this = this
      let param = new FormData()
      if (this.imgArr === null || this.imgArr.length < 9) {
        param.append('file', file.file)
        commentApi.uploadPic(param).then(function (res) {
          if (res.data.status === 0) {
            _this.imgArr.push(file.content)
            _this.imgfile.push(file.file)
            _this.picUrl.push(res.data.re.originalName)
          } else {
            Toast.fail('图片服务器出错请重试！')
          }
        })
      } else {
        Toast.fail('亲，上传图片数量不能超过九张哦！')
      }
    },
    onClick (index) {
      var _this = this
      switch (index) {
        case 0:
          _this.goodsStatus = 1
          break
        case 1:
          _this.goodsStatus = 2
          break
      }
      this.getList()
    }
  },
  components: {
    NavBar
  }
}
</script>
<style scoped>
  .van-card {
    margin-top: 0!important;
    background-color: #ffffff;
  }
  .hide {
    display: none;
  }
  .img-item {
    width: 4.4rem;
    height: 3.75rem;
    float: left;
    margin-left: 1.5rem;
    margin-top: 0.5rem;
  }
  .img-item img {
    width: 100%;
    height: 100%;
  }
  .active-pic {
    font-size: 0.6rem;
    color: #9b9b9b;
    padding: 0 1rem 0 1.5rem;
    margin-top: 1rem;
  }
  .add-pic {
    background: #f3f3f3;
    width: 4.4rem;
    height: 3.75rem;
    float: left;
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    text-align: center;
    font-size: 2rem;
    line-height: 3.5rem;
    color: #979797;
    position: relative;
  }
  .add-pic input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
  }
  .uploader {
    width: 50px;
    height: 50px;
    border: 1px solid #fafafa;
    background: #fff;
  }
  .uploader i {
    font-size: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
  }

</style>
